<template>
  <el-dialog title="分配权限" :visible="showDialog">
    <el-tree
      ref="tree"
      :props="{label:'name'}"
      :data="permList"
      show-checkbox
      check-strictly
      node-key="id"
    />
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button size="small">取消</el-button>
        <el-button type="primary" size="small" @click="submit">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { assignPerm, getRoleDetail } from '@/api/setting'
import { allPermission } from '@/api/permission'
import { listToTree } from '@/utils/index'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permList: [],
      checkedList: [],
      roleId: ''
    }
  },
  async created() {
    const res = await allPermission()
    this.permList = listToTree(res.data.data, '0')
  },
  methods: {

    // 根据Id获取角色列表
    async getRoleDetail(id) {
      this.roleId = id// 保存角色id
      const resp = await getRoleDetail(id)
      // 保存数据
      this.checkedList = resp.data.data.permIds
      // 回显数据
      this.$refs.tree.setCheckedKeys(this.checkedList)
    },
    // 确定更改权限
    async submit() {
      // 获取到勾选框选中的选项
      this.checkedList = this.$refs.tree.getCheckedKeys()
      // 调用接口
      await assignPerm({
        id: this.roleId,
        permIds: this.checkedList
      })
      // 关闭弹窗
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style>

</style>
